<template>
  <div class="bottom_home">
    <div @click="backHome" title="地图复位" class="backHome">
      <img src="../assets/images/亮色风格图集/编组.png" alt="" />
    </div>
    <div @click="switchRoller" title="卷帘工具" class="backHome">
      <img src="../assets/images/亮色风格图集/JL.png" alt="" />
    </div>
    <div @click="clear" title="清除" class="backHome">
      <img src="../assets/images/clear.png" alt="" />
    </div>
    <div @click="myPosition" title="定位">
      <img src="../assets/images/亮色风格图集/编组5.png" alt="" />
    </div>
    <div @click="fullScreen" title="全屏">
      <img src="../assets/images/亮色风格图集/编组7.png" alt="" />
    </div>
  </div>
  <div class="showCity">
    <vxe-modal
      :mask="false"
      :lock-view="false"
      v-model="cityPop"
      width="200"
      height="100"
      type="modal"
      :position="{ top: 70, left: 30 }"
    >
      <template #title>
        <div>当前城市:</div>
      </template>
      <div class="cityContent">{{ city }}</div>
    </vxe-modal>
  </div>
</template>
<script setup>
import axios from 'axios'
import myBMap from '../views/map/mapHooks/bmap'
import { userMap, switchList10, switchList13 } from '@/store/index'
import { onMounted, ref, toRaw, defineComponent, reactive, watch } from 'vue'
import $ from 'jquery'
let map = userMap() //接收菠萝中的地图
let list
let tabdom
let storeBigData = switchList10()
let storeRoller = switchList13()
onMounted(() => {
  list = toRaw(map.map)

  // window.addEventListener('resize', function (e) {
  //   if (isFull.value == false) {
  //     console.log('e', isFull.value)
  //     isFull.value = true
  //     if (tabdom) {
  //       tabdom.style.top = '10%'
  //     }
  //   } else {
  //     console.log('e', isFull.value)
  //     isFull.value = false
  //     if (tabdom) {
  //       tabdom.style.top = '17%'
  //     }
  //   }
  // })
})

//地图复位
const backHome = () => {
  list.getView().setZoom(0)
  list.getView().setCenter([24632, 69653])
  const arr = list.getLayers().getArray()
  // console.log('获取所有图层', arr)
  // 清空画布(遍历各图层并清空要素,保留行政区划)
  for (let i = 0; i < arr.length; i++) {
    if (arr[i].values_.title != 'GeoJSON' && arr[i].className_ != 'myTdt') {
      arr[i].getSource().clear()
    }
  }
}
const switchRoller = () => {
  storeRoller.queryBtn = !storeRoller.queryBtn
}
// 全部清除
const clear = () => {
  const arr = list.getLayers().getArray()
  for (let i = 0; i < arr.length; i++) {
    if (arr[i].values_.title != 'GeoJSON' && arr[i].className_ != 'myTdt') {
      // console.log('调试图层名', arr[i].values_.title)
      arr[i].getSource().clear()
    }
  }
}
const cityPop = ref(false)
const city = ref('未知定位')
//定位(使用者IP位置)--只有请求头中没有携带用户token才可以使用
const myPosition = () => {
  myBMap.init().then((BMap) => {
    let myCity = new BMap.LocalCity()
    myCity.get(
      (result) => {
        let geoc = new BMap.Geocoder()
        geoc.getLocation(result.center, (res) => {
          // console.log('位置', res.addressComponents)
          console.log('位置', res.addressComponents.province)
          city.value = res.addressComponents.province
        })
      },
      { enableHighAccuracy: true }
    )
  })
  cityPop.value = true
}

//是否全屏
let isFullScreen = false
let element = document.documentElement
const dom = ref()
const isFull = ref(false)

const fullScreen = () => {
  // dom.value = tabdom
  if (isFullScreen) {
    if (document.exitFullscreen) {
      document.exitFullscreen()
      // isFull.value = false
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen()
      // isFull.value = false
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen()
      // isFull.value = false
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen()
      // isFull.value = false
    }
  } else {
    if (element.requestFullscreen) {
      // tabdom.style.top = '17%'
      element.requestFullscreen()
      // isFull.value = true
    } else if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen()
      // tabdom.style.top = '17%'
      // isFull.value = true
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen()
      // tabdom.style.top = '17%'
      // isFull.value = true
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen()
      // tabdom.style.top = '17%'
      // isFull.value = true
    }
  }
  isFullScreen = !isFullScreen
}
</script>
<style lang="less" scoped>
.bottom_home {
  position: absolute;
  left: 8px;
  bottom: 7%;
  width: 37px;
  height: 184px;
  display: flex;
  flex-wrap: wrap;
  border-radius: 5px;
  background: #0a163cc9;
  div {
    cursor: pointer;
    text-align: center;
    margin-top: 5px;
    margin-left: 3px;
    &:last-child {
      margin-bottom: 5px;
    }
  }
  div img {
    width: 30px;
    height: 30px;
  }
}
//地图复位
.backHome {
  cursor: hand;
}

// 当前城市样式
.showCity {
  :deep(.vxe-modal--wrapper .vxe-modal--header) {
    background: url('@/assets/images/亮色风格图集/工具表头.png') 0px 0px / 100%
      100% no-repeat !important;
  }
  :deep(.vxe-modal--wrapper .vxe-modal--header-title) {
    font-size: 16px;

    padding: 0 0 0.6em 1em;
    height: 40px;
    line-height: 35px;
    color: #fff;
  }
  :deep(.vxe-modal--wrapper .vxe-modal--close-btn) {
    color: #fff;
    transform: translateY(50%);
    text-shadow: 0px 2px 2px #00000071; //给文字加阴影
  }
  :deep(.vxe-modal--content) {
    flex-grow: 0;
    padding: 0;
    margin: auto auto;
  }
}
</style>
